<template>
    <div class="sjzxRightBottom">
        <div class="title">
            <!-- {{typeName1}} -->
            森林火情监测报告
        </div>
        <div class="tabbar">
            <p
                v-for="(item, index) of reportType"
                :key="index"
                @click="changeModel(item.comp)"
                :class="{ active: currentReportType === item.comp }"
            >
                {{ item.name }}
            </p>
        </div>
        <component :is="currentReportType"></component>
    </div>
</template>

<script>
import { useStore } from "vuex";
// import FirePanel from './FireMonitorReport/SingleReport/FirePanel.vue'
import SingleReport from "./fireMonitorReport/fireMonitorSimpleReport/SingleReport.vue";
import FireMonitorSimpleReportSelectPanel from "./fireMonitorReport/fireMonitorSimpleReport/FireMonitorSimpleReportSelectPanel.vue";
import FireMonitorDayReportSelectPanel from "./fireMonitorReport/fireMonitorDayReport/FireMonitorDayReportSelectPanel.vue";
import { ref, reactive, toRefs } from "vue";
export default {
    components: {
        // FirePanel,
        SingleReport,
        FireMonitorSimpleReportSelectPanel,
        FireMonitorDayReportSelectPanel,
    },
    //props:["typeName"],
    setup() {
        let store = useStore();
        const state = reactive({
            checkAll: false,
            isIndeterminate: true,
        });
        let reportType = ref([
            {
                name: "森林火情简报",
                comp: "FireMonitorSimpleReportSelectPanel",
            },
            { name: "森林火情日报", comp: "FireMonitorDayReportSelectPanel" },
        ]);
        let currentReportType = ref("FireMonitorSimpleReportSelectPanel");
        const changeModel = (type) => {
            currentReportType.value = type;
            if (type === "FireMonitorSimpleReportSelectPanel") {
                if(store.state.userRegion=="海南省"){
                    store.commit("changeSjzxLeftCurrentComponent", "SjzxBasic");
                }else{
                    store.commit("changeSjzxLeftCurrentComponent", "");
                }
            }
        };
        
        return {
            ...toRefs(state),
            currentReportType,
            changeModel,
            reportType,
        };
    },
};
</script>

<style lang="stylus" scoped>
.sjzxRightBottom {
    background: url('/images/sjzx/list.png') no-repeat;
    background-size: 100% 100%;
    width: vw(370);
    height: vh(555);
    margin-top: vh(15);
    .title {
        text-align: center;
        font-size: vw(16);
    }

    .tabbar {
        display: flex;
        justify-content: space-around;
        cursor: pointer;
        width: 100%;
        margin: vh(15) 0 vh(0);

        p {
            flex-shrink: 0;
            width: fit-content;
            font-size: vw(16);
            height: vh(30);
            line-height: vh(30);
            text-align: center;
            color: #fff;
            padding-bottom: vh(30);
            padding-left: vw(20);
            padding-right: vw(20);
        }

        p.active {
            color: #18ceff;
            border-bottom: 1px solid #18ceff;
        }
    }

    .themePic {
        width: 100%;
        display: grid;
        grid-template-columns: vw(122) vw(200);
        grid-row-gap: vh(20);
        grid-column-gap: vw(20);
        margin-top: vh(50);
        margin-left: vh(20);

        .themePicItem {
            display: flex;
            justify-content: space-around;
            background: url('/images/sjzx/item.png') no-repeat;
            background-size: 100% 100%;
            line-height: vh(37);
            height: vh(37);
            font-size: vw(14);
            margin-right: vw(20);
        }
    }
}
</style>